<!-- 选择圈子弹框 -->
<!-- 小瓜子 更新于 2020/08/25 -->

<!-- 小瓜子 更新于 2020/08/29 -->
<!-- 1.增加滚动，防止列表过长无法显示
	 2.添加页面与组件间的传值 -->

<!-- 小瓜子 更新于 2020/09/02 -->
<!-- 重写组件逻辑 -->
<template>
	<view class="popup_box" :style="'height:' + screenHeight*0.7 + 'px;'">
		<input type="text" class="uni-input"  placeholder="请输入想要同步的圈子" maxlength="5" />
		<view class="close" @tap='confirm'>×</view>
		<scroll-view class="commuity_box" :style="'height:' + screenHeight*0.65 + 'px;'">
			<view 
				class="item" 
				:class= "item.selected ? 'sl_item' : ''"
				v-for="(item, index) in userCommunity" 
				:key="index" 
				:data-id="item.id" 
				:data-name="item.name"
				@tap="selectCommunity(item)">
				<image :src="item.avatarUrl" mode="" class="photo" /><text class="name">{{item.name}}</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		props: {
			userCommunity: {
				type: Array,
				default: []
			},
			cNomore: {
				type: Boolean,
				default: false
			},
			screenHeight: 0,
			screenWidth: 0
		},
		data() {
			return {

			}
		},
		inject: ['popup'],
		computed: {
			communities: function() {
				return this.$props.userCommunity
			}
		},
		methods: {
			selectCommunity(community) {
				let _this = this
				if(this.$props.cNomore && !community.selected) {
					uni.showToast({
						icon:'none',
						title:'已达到圈子上限5个了哦~'
					})
					return
				} else {
					this.$props.userCommunity.forEach(item => {
						if(item.id == community.id) {
							item.selected = !item.selected
						}
					})
				}
				
			},
			confirm() {
				this.$emit('paceToCommunity')
				// 关闭弹窗
				this.popup.close()
			},
		}
	}
</script>

<style lang="less">
	.popup_box {
		background-color: #FFFFFF;
		border-top-left-radius: 10rpx;
		border-top-right-radius: 10rpx;
		padding: 20px 0;
		input {
			width: 80%;
			padding: 5px;
			margin-left: 10px;
			font-size: 14px;
			border-radius: 5px;
			background-color: @g-background;
		}
		.close {
			position: absolute;
			top: 15px;
			right: 10px;
			font-size: 24px;
			
		}
		.commuity_box {
			.item {
				margin: 5px;
				padding: 5px;
				padding-left: 10px;
				height: 50px;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				border: 3px solid transparent;
				font-size: 18px;
				.photo {
					width: 45px;
					height: 45px;
					border-radius: 50%;
				}
				.name {
					color: #7F7F7F;
					display: inline-block;
					margin-left: 10px;
				}
			}
			.sl_item {
				border-left-color: #F76B8A;
			}
		}
	}
</style>
